<template>
  <div class="hotel">
    <div class="main">
      <!-- 表单搜索区域 -->
      <hotelFilter
      @init="initData"/>
      <!-- 地图区域 -->
      <el-row type="flex" justify="space-between">
        <!-- 引入高德地图JS -->
        <script 
          type="text/javascript" 
          src="https://webapi.amap.com/maps?v=1.4.15&key=f8245ea0cc0ef1352e3f1acd8048036a">
        </script>
        <!-- 展示地图 -->
        <hotelMap
        :transmitHotels="hotels"
        @initCityName="initCityName"/>
        <!-- 区域信息展示 -->
        <hotelRefion
        :cityscenics="cityscenics"/>
      </el-row>
      <hotelItem
      :transmitHotels="hotels"
      @nestStart="paging"/>
    </div>
  </div>
</template>

<script>
// 引入自定义查询组件
import hotelFilter from '@/components/hotel/hotelFilter.vue'
// 引入城市区域组件
import hotelRefion from '@/components/hotel/hotelRefion.vue'
// 引入地图组件
import hotelMap from '@/components/hotel/hotelMap.vue'
// 引入酒店列表组件
import hotelItem from '@/components/hotel/hotelItem.vue'
export default {
  data(){
    return {
      cityscenics:[],
      filter: [],
      hotels: {},
      cityName: '',
      query: ''
    }
  },
  methods:{
    // 获取到搜索表单的值
    initData(filter){
      if(filter.length > 0){
        this.filter = filter;
        let flag = this.filter.some(item => item.name == 'city')
        let query = '';
        this.filter.forEach(ele => {
          if(typeof ele.data == 'string' || typeof ele.data == 'number'){
            query = query.concat(`${ele.name}=${ele.data}&`);
          }
          if(ele.data instanceof Array){
            ele.data.forEach(item => {
                query = query.concat(`${ele.name}=${item}&`);
            })
          }
        })
        if(filter.length > 0){
          query = 
          flag ? 
          query.substring(0,query.length-1) :
          query.concat(`city=${this.$store.state.hotel.cityData.data.data[0].id}`) ;
        }
        this.query = query;
        this.initHotels(query);
      }
    },
    // 获取到当前定位到的城市的详细信息
    initCityName(cityName){
      this.cityName = cityName;
      this.initCityAndHotels();
    },
    // 初始化城市数据以及城市下的酒店数据
    async initCityAndHotels(){
        // 通过vuex获取到所在城市详情以及旅馆并且存放到sessionStorage中，将cityName作为查询的参数
        this.cityData = await this.$store.dispatch('hotel/searchCity',{ name: this.cityName } );
        let { id } = this.cityData.data.data[0] || 0;
        this.hotels = await this.$store.dispatch('hotel/saveHotels',{ city: `${id}` } );
        this.$alert(`当前定位城市：${this.cityName}`,'提示', {
          confirmButtonText: '确定',
        });
        // 将区域内容保存进vuex
        this.cityscenics = this.cityData.data.data[0].scenics
        this.$store.commit('hotel/saveCityScenics',this.cityscenics);
    },
    //获取选中的城市的旅店数据
    async initHotels(params){
      this.hotels = await this.$store.dispatch('hotel/searchHotelsByQueryString',params)
    },
    // 开始进行数据分页
    paging(pageData){
      let {pageIndex,pageSize} = pageData;
      let query = '';
      if(this.query.indexOf('city') > 0){
        query = this.query.concat(`&_start=${pageIndex * pageSize}`);
      }else{
        let cityId = this.$store.state.hotel.cityData.data.data[0].id;
        query = this.query.concat(`&_start=${pageIndex * pageSize}&city=${cityId}`);
      }
      this.initHotels(query);
    }
  },
  destroyed(){
    this.$store.commit('hotel/removeAll');
  },
  components:{
    hotelFilter,
    hotelRefion,
    hotelMap,
    hotelItem
  },
  mounted(){

  }
}
</script>

<style scoped lang="less">
    .hotel {
      font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
      // 主区域
      .main{
        width: 1000px;
        margin: 0 auto;
        margin-bottom: 40px;
      }
    } 
</style>